<template>
    <div class="tech-background-wrapper">
      <canvas 
        ref="canvasRef" 
        class="tech-background-canvas"
      />
      <div class="tech-background-grid" />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted, nextTick } from 'vue'
  
  const props = defineProps({
    intensity: {
      type: String,
      default: 'medium',
      validator: (value) => ['low', 'medium', 'high'].includes(value)
    },
    colorTheme: {
      type: String,
      default: 'blue',
      validator: (value) => ['blue', 'purple', 'green', 'cyan'].includes(value)
    }
  })
  
  const canvasRef = ref(null)
  let animationFrame = null
  let particles = []
  let flowLines = []
  
  // 颜色配置
  const colors = {
    blue: { primary: '#00f2fe', secondary: '#4facfe', accent: '#1e40af' },
    purple: { primary: '#667eea', secondary: '#764ba2', accent: '#4c1d95' },
    green: { primary: '#43e97b', secondary: '#38f9d7', accent: '#065f46' },
    cyan: { primary: '#00d2ff', secondary: '#3a7bd5', accent: '#0c4a6e' }
  }
  
  // 粒子类
  class Particle {
    constructor(width, height) {
      this.width = width
      this.height = height
      this.x = Math.random() * width
      this.y = Math.random() * height
      this.vx = (Math.random() - 0.5) * 0.5
      this.vy = (Math.random() - 0.5) * 0.5
      this.radius = Math.random() * 1.5 + 0.5
      this.alpha = Math.random() * 0.5 + 0.2
      this.color = colors[props.colorTheme].primary
    }
  
    update() {
      this.x += this.vx
      this.y += this.vy
  
      // 边界反弹
      if (this.x < 0 || this.x > this.width) this.vx *= -1
      if (this.y < 0 || this.y > this.height) this.vy *= -1
  
      // 随机扰动
      if (Math.random() < 0.02) {
        this.vx += (Math.random() - 0.5) * 0.1
        this.vy += (Math.random() - 0.5) * 0.1
      }
    }
  
    draw(ctx) {
      ctx.save()
      ctx.globalAlpha = this.alpha
      ctx.fillStyle = this.color
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
    }
  }
  
  // 流动线类
  class FlowLine {
    constructor(width, height) {
      this.width = width
      this.height = height
      this.reset()
    }
  
    reset() {
      this.x = Math.random() * this.width
      this.y = Math.random() * this.height
      this.length = Math.random() * 60 + 30
      this.speed = Math.random() * 1.5 + 0.5
      this.angle = Math.random() * Math.PI * 2
      this.width = Math.random() * 1.5 + 0.5
      this.alpha = Math.random() * 0.2 + 0.1
      this.color = colors[props.colorTheme].secondary
    }
  
    update() {
      this.x += Math.cos(this.angle) * this.speed
      this.y += Math.sin(this.angle) * this.speed
  
      if (this.x < -this.length || this.x > this.width + this.length ||
          this.y < -this.length || this.y > this.height + this.length) {
        this.reset()
      }
    }
  
    draw(ctx) {
      ctx.save()
      ctx.globalAlpha = this.alpha
      ctx.strokeStyle = this.color
      ctx.lineWidth = this.width
      ctx.beginPath()
      ctx.moveTo(this.x, this.y)
      ctx.lineTo(
        this.x + Math.cos(this.angle) * this.length,
        this.y + Math.sin(this.angle) * this.length
      )
      ctx.stroke()
      ctx.restore()
    }
  }
  
  // 初始化Canvas尺寸
  const initCanvasSize = () => {
    const canvas = canvasRef.value
    if (!canvas) return
    
    const container = canvas.parentElement
    const width = container.clientWidth
    const height = container.clientHeight
    
    // 设置Canvas尺寸
    canvas.width = width
    canvas.height = height
    
    return { width, height }
  }
  
  // 创建粒子
  const createParticles = (width, height) => {
    particles = []
    const count = props.intensity === 'low' ? 40 : props.intensity === 'medium' ? 80 : 120
    
    for (let i = 0; i < count; i++) {
      particles.push(new Particle(width, height))
    }
  }
  
  // 创建流动线
  const createFlowLines = (width, height) => {
    flowLines = []
    const count = props.intensity === 'low' ? 5 : props.intensity === 'medium' ? 10 : 15
    
    for (let i = 0; i < count; i++) {
      flowLines.push(new FlowLine(width, height))
    }
  }
  
  // 绘制连线
  const drawConnections = (ctx, width, height) => {
    const maxDistance = 100
    
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const p1 = particles[i]
        const p2 = particles[j]
        
        const dx = p1.x - p2.x
        const dy = p1.y - p2.y
        const distance = Math.sqrt(dx * dx + dy * dy)
        
        if (distance < maxDistance) {
          const opacity = 1 - (distance / maxDistance)
          ctx.save()
          ctx.globalAlpha = opacity * 0.15
          ctx.strokeStyle = colors[props.colorTheme].accent
          ctx.lineWidth = 0.5
          ctx.beginPath()
          ctx.moveTo(p1.x, p1.y)
          ctx.lineTo(p2.x, p2.y)
          ctx.stroke()
          ctx.restore()
        }
      }
    }
  }
  
  // 动画循环
  const animate = () => {
    const canvas = canvasRef.value
    if (!canvas) return
    
    const ctx = canvas.getContext('2d')
    const width = canvas.width
    const height = canvas.height
    
    // 清除画布（使用半透明创建拖尾效果）
    ctx.fillStyle = 'rgba(10, 14, 23, 0.1)'
    ctx.fillRect(0, 0, width, height)
    
    // 更新和绘制粒子
    particles.forEach(particle => {
      particle.update()
      particle.draw(ctx)
    })
    
    // 绘制连线
    drawConnections(ctx, width, height)
    
    // 更新和绘制流动线
    flowLines.forEach(line => {
      line.update()
      line.draw(ctx)
    })
    
    animationFrame = requestAnimationFrame(animate)
  }
  
  // 处理窗口大小变化
  const handleResize = () => {
    const { width, height } = initCanvasSize()
    createParticles(width, height)
    createFlowLines(width, height)
  }
  
  // 初始化
  const init = async () => {
    await nextTick()
    
    const { width, height } = initCanvasSize()
    createParticles(width, height)
    createFlowLines(width, height)
    animate()
    
    window.addEventListener('resize', handleResize)
  }
  
  // 清理
  const cleanup = () => {
    if (animationFrame) {
      cancelAnimationFrame(animationFrame)
    }
    window.removeEventListener('resize', handleResize)
  }
  
  onMounted(() => {
    init()
  })
  
  onUnmounted(() => {
    cleanup()
  })
  </script>
  
  <style scoped>
  .tech-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  
  .tech-background-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .tech-background-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(79, 172, 254, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(79, 172, 254, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridPulse 6s ease-in-out infinite;
    opacity: 0.1;
  }
  
  @keyframes gridPulse {
    0%, 100% {
      opacity: 0.1;
    }
    50% {
      opacity: 0.15;
    }
  }
  </style>